<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>フッターをウィンドウ下部に固定させるサンプル</title>

<style>
* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%; /* Required */
}

body {
  color: #333;
  font: 11px Verdana, sans-serif;
  text-align: center;
}

#wrapper {
  margin: 0 auto;
  width: 600px;
  background: #DDD;
  text-align: left;
  position: relative;
  min-height: 100%; /* For Modern Browsers */
  height: auto !important; /* For Modern Browsers */
  height: 100%; /* For IE */
}

#header {
  background: #999;
}

#content {
  padding: 0 2em 40px 2em;
}

#footer {
  width: 100%;
  background: #CCC;
  position: absolute;
  bottom: 0 !important;
  bottom: -1px; /* For Certain IE widths */
  height: 40px;
}
</style>
</head>
<body>
<div id="wrapper">

    <div id="header">
	<h1>Head</h1>
	</div>

		<div id="content">
		<p>test text</p>
		</div>

			<div id="footer">
			<p>Foot</p>
			</div>

</div>
</body>
</html>